<template>
    <!-- <div class="common-layout">
        <el-container >Header</el-container>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </div> -->
    # NPM
$ npm install element-plus --save
    <p>课后作业</p>
    {{ msg }}
    <br>
    <el-button type="primary" @click="cl()">primary</el-button>
    <br>
    
    <!-- <el-container>
        <el-header></el-header>
        <el-main>2</el-main>
        <el-footer>2</el-footer>
    </el-container> -->
    <!-- 布局容器 -->
    <div class="bujudiv">
        <el-container class="buju">
            <!-- 左侧 -->
            <el-aside width="200px" class="zuoce">
                <el-scrollbar>
                    <el-scrollbar>
                        <el-menu :default-openeds="['1', '4']">
                          <el-sub-menu index="1">
                            <template #title >
                              <el-icon><message style="width: 1em; height: 1em; margin-right: 8px"/></el-icon> 第一部分
                            </template>
                            <el-menu-item-group>  
                              
                              <el-menu-item index="1-1">1-1</el-menu-item>
                              <el-menu-item index="1-2">1-2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group >
                              <el-menu-item index="1-3">1-3</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="1-4">
                              <template #title>1-4</template>
                              <el-menu-item index="1-4-1">4-1</el-menu-item>
                            </el-sub-menu>
                          </el-sub-menu>
                        </el-menu>

                        <el-menu >
                            <el-sub-menu index="2" disabled>
                              <template #title>
                                <el-icon><message /></el-icon><i :icon="share">第二部分</i>
                              </template>
                            </el-sub-menu>
                          </el-menu>
                          <el-menu >
                            <el-sub-menu index="3">
                              <template #title>
                                <el-icon><message /></el-icon>第三部分
                              </template>
                            </el-sub-menu>
                          </el-menu>
                          <el-menu >
                            <el-sub-menu index="4">
                              <template #title>
                                <el-icon><message /></el-icon>第四部分
                              </template>
                            </el-sub-menu>
                          </el-menu>
                      </el-scrollbar>
                </el-scrollbar>
            </el-aside>
            <el-container class="youce">
                <el-header class="tou"><p>第一个使用布局的应用</p></el-header>
                <el-main class="zhong" >
                    <div class="card" h="30" w="30" m="2" style="box-shadow: 'dark'">
                        <el-card class="cd">
                            <img src="./dui.jpg" alt="">
                            <p>猫家外卖</p>
                            <p><el-button type="success" round>点击预定</el-button></p>
                        </el-card>
                    </div>
                </el-main>
                <el-footer class="di"><p><el-button :plain="true" @click="open"><el-icon><CircleClose /></el-icon></el-button>web前端实战开发课程版权所有</p></el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { ElMessage } from 'element-plus';
    export default{
        name:'hello',
        data(){
            return{
               msg:'这是新的、自己建的textUi组件'
            }
        },
        methods:{
            cl(){
                return this.msg='到此一游'
            },
            open(){
              ElMessage('版权所有，不可侵权，联系方式：15104014687')
            }
        }
        
    }
</script>
<style>
.buju{
    height: 500px;
}
.zuoce{
    background-color: #979797;
}
.tou,.di{
    background-color: #686868;
    font-size: 24px;
}
.tou p{
    margin: auto;
    text-align: center;
}
.zhong{
    background-color: #a3a3a3;
}
.cd{
    width: 50%;
    height: 100%;
    margin: auto;
    
}
</style>